<!DOCTYPE html>
<html lang="en">

	<head>

		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="shortcut icon" href="img/ic.png">
		<title>场景维护</title>

		<!-- Bootstrap Core CSS -->
		<link href="css/bootstrap.css" rel="stylesheet">

		<!-- Custom CSS -->
		<link href="css/sb-admin.css" rel="stylesheet">
		<link href="dist/css/bootstrapValidator.css" rel="stylesheet">
		<!-- Morris Charts CSS -->
		<link href="css/plugins/morris.css" rel="stylesheet">
		<link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css" />
		<!-- Custom Fonts -->
		<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<!-- tab table-->
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="js/cdn/html5shiv-3.7.0.js"></script>
		<script src="js/cdn/respond-1.4.2.min.js"></script>
    	<![endif]-->
		<link rel="stylesheet" href="css/cdn/dataTables.bootstrap.css">
		<link rel="stylesheet" href="css/cdn/font_i0327076nave7b9.css">
		<link rel="stylesheet" type="text/css" href="css/datatable.css" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG"></script>
		<style>
			#example_paginate {
				float: right;
			}
			
			.handle-btn {
				cursor: pointer;
				margin: 0 2px;
			}
			
			#wrapper {
				padding-left: 0px;
			}
			
			.navigation {
				border-bottom: 3px solid #edebeb;
			}
			
			.navigation a:hover {
				color: #0F6AFC;
				border-bottom: 2px solid #01AAED;
			}
			
			.this {
				color: #01aaed;
				font-weight: bold;
				border-bottom: 2px solid #01AAED;
			}
			
			#allmap {
				height: 800px;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}
			
			.dl-dl {
				border: 1px solid #C0C0C0;
				padding: 8px;
				border-radius: 3px;
				padding-bottom: 10px;
			}
			
			.dl-dl dd {
				line-height: 30px;
			}
			
			.dl-dl dd span {
				display: block;
				float: right;
			}
		</style>
	</head>

	<body>
		<div id="wrapper">
			<!-- Navigation -->
			<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height: 67px; background-image:url(img/top.jpg);">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header" style=" width:225px;">
				</div>
				<!-- Top Menu Items -->
				<ul class="nav navbar-right top-nav">
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span id="userName"></span> <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li>
								<a href="refereePwd.html"><i class="fa fa-fw fa-gear"></i> 修改密码</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="login.html"><i class="fa fa-fw fa-power-off"></i> 退出</a>
							</li>
						</ul>
					</li>
				</ul>
				<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->

				<!-- /.navbar-collapse -->
			</nav>

			<div id="page-wrapper">

				<div class="container-fluid">
					<div class="row sss">
						<nav class="navbar navbar-default" role="navigation">
							<div>
								<ul class="nav navbar-nav">
									<li>
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											比赛信息
											<b class="caret"></b>
										</a>
										<ul class="dropdown-menu">
											<li>
												<a href="index.html">比赛实况</a>
											</li>
											<li id="index_dek" style="display: none;"class="divider" >
		                                    <li id="index_des" style="display: none;"><a href="Check.html">比赛回查</a></li>
										</ul>
										</li>
										<li id="index_ach" style="display: none;">
											<a href="achievement.html">成绩管理</a>
										</li>
										<li>
											<a href="ParticipatingTeams.html">参赛车队</a>
										</li>
										<li>
											<a href="Court.html">赛场维护</a>
										</li>
										<li class="active">
											<a href="Fault.html">场景维护</a>
										</li>
										<li class="dropdown" id="index_dev" style="display: none;">
											<a href="#" class="dropdown-toggle" data-toggle="dropdown">
												基础数据
												<b class="caret"></b>
											</a>
											<ul class="dropdown-menu">
												<li>
													<a href="device.html">设备管理</a>
												</li>
												<li class="divider">
												<li>
													<a href="Referee.html">裁判管理</a>
												</li>
												<li class="divider">
												<li>
													<a href="User.html">用户管理</a>
												</li>
											</ul>
											</li>
								</ul>
								<span style="float: right; margin-right: 0px; margin-top: 10px;"><a href="Ranking_2.html"><img style="width: 60%;" src="img/skip.png"></a></span>
							</div>
						</nav>
					</div>
					<!-- /.row -->
					<div class="row">
						<div class="panel-heading">
							<ul class="nav">
								<li style="float: left;">
									<b class="panel-title" style=" line-height: 34px;"><span class="xiahua">场景管理</span></b>
								</li>
								<li style="float: left; padding-left: 20px;">
									<div class="btn-group">
										<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#addScene">
							    		添加场景
										</button>
									</div>
								</li>
							</ul>
						</div>
						<div class="panel-body">
							<div class="flot-chart">
								<table id="example" class="display" width="100%"></table>
							</div>
						</div>
					</div>
					<!-- /.row -->
				</div>
				<!-- 新增 -->
				<div class="modal fade" id="addScene" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content" style="border-top: 5px solid #12dbcd;">
							<div class="modal-body">
								<div class="panel-body">
									<form class="form-horizontal" id="addform" method="get">
										<div class="text-center" style="line-height: 34px; margin-bottom: 5px; font-size: 16px;"><b>添加场景</b></div>
										<div class="form-group">

											<label class="col-sm-2 control-label">场景名称</label>
											<div class="col-sm-10">
												<input type="text" id="scenesName" name="scenesName" class="form-control">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">分数</label>
											<div class="col-sm-10">
												<input type="text" id="scenesScore" name="scenesScore" class="form-control">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">场景类型</label>
											<div class="col-sm-10" style="height: 35px; line-height: 35px;">
												<input type="radio" value="0" name="scenesType" checked="checked" style="margin-right: 10px;">场景
												<input type="radio" value="1" name="scenesType" style="margin:0 10px;">路段
											</div>
										</div>
										<div class="text-center">
											<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">
											关闭
										</button>
											<button type="submit" class="btn btn-primary" style="margin-left: 10px;">
											保存
										</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 模态框（Modal） -->
				<!-- /.删除 -->
				<div class="modal fade" id="Delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content" style="border-top: 5px solid #12dbcd;">
							<div class="modal-body text-center">确定要删除此项？</div>
							<div class="text-center" style="padding-bottom: 15px;">
								<input id="scenesId" name="scenesId" type="hidden" :value="dataObj.scenesId" />
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<button style="margin-left: 10px;" type="button" v-on:click="Delete()" class="btn btn-primary">确定</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal -->
				</div>
			</div>
			<!-- /#page-wrapper -->

		</div>
		<!-- /#wrapper -->

		<!-- jQuery -->
		<script src="js/jquery.js"></script>

		<!-- Bootstrap Core JavaScript -->
		<script src="js/bootstrap.min.js"></script>
		<!-- tab table-->
		<script src="js/cdn/jquery.dataTables.min.js"></script>
		<script src="js/cdn/dataTables.bootstrap.js"></script>
		<script src="nuget/content/scripts/toastr.js"></script>
		<script type="text/javascript" src="dist/js/bootstrapValidator.min.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/vue/vue.js"></script>
		<script type="text/javascript" src="js/vue/vue-router.js"></script>
		<script>
            var userName = localStorage.getItem("userName");    $("#userName").text(userName);
			Vue.filter("timeChange", function(value) {
				return replaceTime(value / 1000);
			});
			var vue = new Vue({
				el: '#wrapper',
				data: {
					dataObj: {
						deviceType: "",
						deviceId: ""
					},
					Validator: {
						message: 'This value is not valid',
						// 定义未通过验证的状态图标
						feedbackIcons: {
							valid: 'glyphicon glyphicon-ok',
							invalid: 'glyphicon glyphicon-remove',
							validating: 'glyphicon glyphicon-refresh'
						},
						fields: {
							scenesScore: {
								validators: {
									notEmpty: {
										message: '分数不能为空'
									},

								}
							},
							
							scenesName: {
								validators: {
									notEmpty: {
										message: '场景名称不能为空'
									},

								}
							},
						}
					},
				},
				mounted: function() {
					this.deviceBasicId();
					this.form();
				},
				methods: {
					form: function() {
						//设备新增
						$("#addform").bootstrapValidator(
							this.Validator
						).on("success.form.bv", function() {
							vue.addScene();
						});
					},
					//初始化显示详情
					deviceBasicId: function() {
						$(document).ready(function() {
							var myTable = $('#example').DataTable({
								"processing": false, //DataTables载入数据时，是否显示‘进度’提示  
								"stateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
								"scrollCollapse": true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变  
								"paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
								"language": lang, //提示信息
								"destroy": true, //Cannot reinitialise DataTable,解决重新加载表格内容问题  
								"autoWidth": true, //自适应宽度，
                                "lengthMenu": [15, 30, 50],
								"stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
								"showRowNumber": true,
								"searching": false, //是否允许Datatables开启本地搜索
								"paging": true, //是否开启本地分页
								"lengthChange": false, //是否允许产品改变表格每页显示的记录数
								"info": false, //控制是否显示表格左下角的信息
								"ordering": false,
								"deferRender": true, //延迟渲染
                                "serverSide": true,
                                "iDisplayLength": 15, //每页显示10条记录
//                                "bLengthChange": true,
                                "ajax": function (data, callback, settings) {
                                    //封装请求参数
                                    //data.length; 页面显示记录条数，在页面显示每页显示多少项的时候
                                    //data.start; 开始的记录序号
                                    var param = {};
                                    param.pageNo = (data.start / data.length)+1;
                                    param.pageSize = data.length;
//                                    param.pageSize = 15;
                                    //ajax请求数据
                                    $.ajax({
                                        type: "GET",
                                        url: url + '/users/' + adminId + '/scenes/page',
                                        cache: false,   //禁用缓存
                                        data: param,  //传入组装的参数
                                        dataType: "json",
                                        success: function (result) {
                                            //封装返回数据
                                            var returnData = {};
                                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                            returnData.recordsTotal = result.totalNum;//返回数据全部记录
                                            returnData.recordsFiltered = result.totalNum;//后台不实现过滤功能，每次查询均视作全部结果
                                            returnData.data = result.result;//返回的数据列表
                                            callback(returnData);
                                        }
                                    });
                                },
								"columns": [{ //定义列
									"data": "riwso",
									"render": function(data, type, full, meta) {
										return(meta.row + 1);
									},
									"width": "50px",
									"sTitle": "序号", //标题
									"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错  
								}, {
									"data": function(obj) {
										return '<a href="sceneDetails.html?scenesId=' + obj.scenesId + '" target="_blank" style="color:#1aa79d; text-decoration:none;"><b>' + obj.scenesName + '</b></a>';
									},
									"sTitle": "场景名称",
									"sDefaultContent": "",
								}, {
									"data": function(obj) {
										return obj.scenesScore + '分';
									},
									"sTitle": "分值",
									"sDefaultContent": "",
								}, {
									"data": function(obj) {
										if(obj.scenesType == "0") {
											return '场景';
										} else {
											return '路段';
										}
									},
									"sTitle": "类型", //标题
									"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错  
								}, {
									"data": function(obj) {
										return obj.illegalCount + '项';
									},
									"sTitle": "违规项",
									"sDefaultContent": "",
								}, {
									"data": function(obj) {
										var scenesId = obj.scenesId;
										return '<span  title="删除" data-toggle="modal" data-target="#Delete" onclick=javascript:vue.team(' + scenesId + '); class="handle-btn handle-btn-edit"><b class="iconfont icon-shanchu" style="color:#ffbe00"></b></span>';
									},
									"className": "td-handle",
									"sTitle": "操作", //标题
									"width": "50px",
									"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错  
								}]
							});
						});
					},
					//赋值
					team: function(scenesId) {
						var _self = this;
						$.ajax({
							type: "get",
							url: url + '/users/' + adminId + '/scenes/' + scenesId,
							async: false,
							dataType: 'json',
							contentType: "application/json; charset=utf-8",
							beforeSend: function(request) {
								request.setRequestHeader("accessToken", accessToken);
							},
							success: function(data) {
								if(data.code == 1){
									_self.dataObj = {};
									var result = data.result;
									_self.dataObj = result;
								}else{
									toastr['error'](data.description);
								}
							}
						});
					},
					//新增
					addScene: function() {
						var datas = formToJson($("#addform"));
						var th = this;
						$.ajax({
							type: "POST",
							url: url + '/users/' + adminId + '/scenes',
							data: datas,
							async: false,
							dataType: 'json',
							contentType: "application/json; charset=utf-8",
							beforeSend: function(request) {
								request.setRequestHeader("accessToken", accessToken);
							},
							success: function(data) {
								if(data.code == 1){
									$('#addScene').modal('hide');
									$("#scenesName").val("");
									th.deviceBasicId(); //刷新
								}else{
                                    alert(data.description);
									toastr['error'](data.description);
								}
							}
						});
					},
					//删除
					Delete: function() {
						var scenesId = $("#scenesId").val();
						var th = this;
						$.ajax({
							type: "DELETE",
							url: url + '/users/' + adminId + '/scenes/' + scenesId,
							async: false,
							dataType: 'json',
							contentType: "application/json; charset=utf-8",
							beforeSend: function(request) {
								request.setRequestHeader("accessToken", accessToken);
							},
							success: function(data) {
								if(data.code == 1){
									$('#Delete').modal('hide');
									th.deviceBasicId(); //刷新
								}else{
									toastr['error'](data.description);
								}
							}
						});
					},
				},
			});
		</script>
	</body>

</html>